<template>
  <div class="app-container">
    <el-scrollbar style="height: 100%;">
      <div class="echarts-item">
        <div class="echarts-title">
          {{ echartsData.all.title }}
        </div>
        <el-row :gutter="15" class="echarts-row" style="height: 330px;">
          <el-col :span="24">
            <pie :echartsData="echartsData.all"></pie>
          </el-col>
        </el-row>
      </div>
      <div class="echarts-item">
        <div class="echarts-title">
          {{ echartsData.type.title }}
        </div>
        <el-row :gutter="15" class="echarts-row" style="height: 330px;">
          <el-col :span="24">
            <line-bar :echartsData="echartsData.type"></line-bar>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import Pie from '@/components/echarts/Pie'
  import LineBar from '@/components/echarts/LineBar'
  export default {
    mounted() {
      this.$store.commit('rdefaultActive', 'sslb')
    },
    components: {
      Pie,
      LineBar
    },
    data() {
      return {
        n: 2,
        echartsData: {
          all: {
            title: '售水类别分析',
          },
          type: {
            title: '售水类别分析',
            dataset: [
              ['product', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09', '2018-10', '2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04'],
              ['商业', 329353.88,350935.09,347062.2,317450.98,335699.15,324411.73,323089.48,326865.86,339715.47,332267.01,340038.87,335920.82,354732.33],
              ['居民', 261538.32,278675.83,275600.39,252086.26,266577.05,257613.76,256563.77,259562.57,269766.39,263851.61,270023.19,266753.09,281691.21],
              ['工业', 668684.38,712500.49,704637.41,644517.99,681567.11,658650.34,655965.77,663632.94,689721.41,674598.88,690377.98,682017.19,720210.02],
            ],
            unitName: ['km³'],
            yAxis: [
              {
                name: '水量(kw/m³)',
                formatter: '{value}'
              }
            ]
          }
        }
      }
    },
    methods: {}
  }
</script>

<style scoped>

</style>
